<!--
  * @Description: 我的投递
  * @Author: rcc
  * @Date: 2024-08-07 14:58:39
  * @FilePath: /rc-recruitment/pages/office/delivery/delivery.vue
-->

<template>
	<view class="p-h24">
		<view class="flex-c m-t10">
			<up-tabs
				:current="tabIndex"
				:list="tabs"
				:activeStyle="{
					color: '#3F77FB',
					'font-size': '28rpx',
					'font-weight': 'bold',
				}"
				:inactiveStyle="{
					color: '#666666',
					'font-size': '28rpx',
					'font-weight': 'bold',
				}"
				lineColor="#3F77FB"
				@change="onTabsChange"
			/>
		</view>

		<view class="m-t20">
			<template v-if="!isEmpty">
				<view
					v-for="item in list"
					:key="item.id"
					class="card flex"
					@click="toPage(item.id)"
				>
					<view class="dot m-r20" />

					<view class="flex-1 flex-d-sb h">
						<view class="flex">
							<text class="flex-1 text-700-130">{{ item.title }}【全职】</text>
							<text class="text-700-530">{{ item.money_range }}</text>
						</view>

						<view class="flex">
							<text class="tag m-r10 text-400-324">{{ item.area }}</text>
							<!-- <text class="tag m-r10 text-400-324">男女不限</text> -->
							<text class="tag m-r10 text-400-324">{{
								item.lowest_education
							}}</text>
						</view>

						<view class="flex">
							<text class="flex-1 text-400-326">{{ item.company }}</text>
							<text class="text-400-326"
								>申请日期：{{ timeFormat(item.createtime * 1000) }}</text
							>
						</view>
					</view>
				</view>
			</template>
			<view v-else class="p-v80">
				<up-empty />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { usePagination } from "@/hooks/use-pagination";
import { timeFormat } from "@/utils/utils";
const tabIndex = ref(0);
const tabs = reactive([
	{ name: "投递成功", value: "0" },
	// { name: '已查看' },
	{ name: "面试", value: "2" },
	{ name: "不合适", value: "3" },
]);

const onTabsChange = (e) => {
	tabIndex.value = e.index;

	refresh();
};

const { isEmpty, list, refresh, loadMore } = usePagination(
	(params) => {
		const item = tabs[tabIndex.value];
		return uni.$u.get("/position/tdlst", { type: item.value, ...params });
	},
	{ immediate: false, showLoading: true }
);
const toPage = (id: number) => {
	uni.navigateTo({
		url: "/pages/office/home/home?id=" + id,
	});
};
onLoad((e: any) => {
	tabIndex.value = tabs.findIndex((x) => x.value == e.type);

	loadMore();
});
onPullDownRefresh(() => {
	refresh().then(() => uni.stopPullDownRefresh());
});

onReachBottom(loadMore);
</script>

<style lang="scss" scoped>
page {
	background-color: $page-color-4;
}

.card {
	height: 210rpx;
	margin-bottom: 20rpx;
	padding: 30rpx 20rpx;
	border-radius: 20rpx;
	background-color: $bg-color-1;

	&:last-child {
		border: none;
	}

	.dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #e6242b;
	}

	.tag {
		height: 44rpx;
		padding: 0 10rpx;
		border-radius: 4rpx;
		text-align: center;
		line-height: 44rpx;
		background-color: #f3f3f3;
	}
}
</style>
